<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <link rel="stylesheet" href="css/style.css">
  <style>
    #page,
    #instance,
    iframe {
      width: 100%;
      height: 100%;
      overflow: hidden;
      border: none;
    }

    #instance {
      background-color: rgba(0, 0, 0, .5);
      background-color: #fff;
      position: fixed;
      top: 0;
      left: 0;
      text-align: center;
    }

    #demo {
      display: inline-block;
      width: 120px;
      height: 120px;
      margin: -60px 0 0 -60px;
      border-radius: 50%;
      border-color: #ececec;
      position: absolute;
      top: 50%;
    }
  </style>
</head>
<body>
<div id="instance">
  <div id="demo"></div>
</div>
<div id="page">
  <iframe src="http://qq.com/" frameborder="0"></iframe>
</div>

<script>
  Object.assign(JParticles.easing, {
    easeOutBounce: function(x, t, b, c, d) {
      if ((t /= d) < (1 / 2.75)) {
        return c * (7.5625 * t * t) + b
      } else if (t < (2 / 2.75)) {
        return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b
      } else if (t < (2.5 / 2.75)) {
        return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b
      } else {
        return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b
      }
    },
  });

  (function() {
    const instance = document.getElementById('instance')
    const demo = document.getElementById('demo')
    const loading = new JParticles.WaveLoading(demo, {
      font: 'normal 900 14px Arial',

      // 扩展 easing
      easing: 'easeOutBounce',

      // 对于不需要自适应的，应该设置 resize: false，
      // 减少计算，提高性能
      resize: false,
    })

    loading
      .onProgress(function(progress) {

        // 如果进度大于 60，设置文本颜色为白色
        if (progress >= 60) {
          loading.setOptions({
            textColor: '#fff',
          })
        }
      })
      .onFinished(function() {
        setTimeout(function() {
          instance.parentNode.removeChild(instance)
        }, 100)
      })
      .onDestroy(function() {
        console.info('onDestroy: Canvas has been removed!!!')
      })

    window.onload = function() {
      loading.done()
    }

    setTimeout(function() {
      loading.done()
    }, 6000)
  })()
</script>
</body>
</html>
